<template>
    <a-form :form="form" style="max-width: 500px; margin: 40px auto 0;">
      <a-form-item
        label="绑定电子邮件"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 19}"
      >
        <a-input v-decorator="['email', validatorRules.email]" size="large" type="text" placeholder="请输入绑定电子邮件" />
      </a-form-item>
      <a-form-item
        label="验证码"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 19}"
      >
        <a-input-group :compact="true" style="display: inline-block; vertical-align: middle">
          <a-input v-decorator="['inputCode',validatorRules.inputCode]" size="large" :style="{width: 'calc(100% - 115px)'}" placeholder="请输入验证码"/>
          <img v-if="requestCodeSuccess" style="margin-top: 2px; margin-left: 10px;" :src="randCodeImage" @click="handleChangeCheckCode" />
          <img v-else style="margin-top: 2px; margin-left: 10px;" src="@/assets/checkcode.png" @click="handleChangeCheckCode" />
        </a-input-group>
      </a-form-item>
      <a-form-item :wrapperCol="{span: 19, offset: 5}">
        <a-button size="large" type="primary" style="width:100%;" @click="nextStep">下一步</a-button>
      </a-form-item>
    </a-form>
</template>

<script>
  import pick from 'lodash.pick'
  import { postAction, getAction } from '@/api/manage'
  
  export default {
    name: "Step1",
    props: {
      param: {
        type: Object,
        default: () => { return {} },
        required: false
      }
    },
    data (){
      return {
        form: this.$form.createForm(this),
        currdatetime: '',
        randCodeImage: '',
        requestCodeSuccess: false,
        verifiedCode: '',
        inputCodeContent: '',
        validatorRules: {
          email: {
            rules: [{
              required: true,
              message: '请输入绑定电子邮箱!'
            }, {
              validator: this.validateEmail
            }]
          },
          inputCode: {
            rules: [{
              required: true,
              message: '请输入验证码!'
            }]
          }
        }
      }
    },
    created() {
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.param, 'email'))
      })
      this.handleChangeCheckCode()
    },
    methods: {
      validateEmail(rule, value, callback){
        if(!value){
          callback()
        }else{
          if(new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(value)){
            callback()
          }else{
            callback("请输入正确格式的邮箱!")
          }
        }
      },
      nextStep () {
        // this.$emit('nextStep')
        let that = this
        this.form.validateFields((err, values) => {
          const smsParams = {}
          if (!err) {
            smsParams.email = values.email
            smsParams.inputCode = values.inputCode
            smsParams.smsmode = "BINDING"
            smsParams.checkKey = that.currdatetime
            smsParams.bindname = "电子邮箱"
            postAction("/sys/email", smsParams).then(res => {
              if (res.success) {
                that.$emit('nextStep', {email: values.email})
              } else {
                that.cmsFailed(res.message)
              }
            })
          }
        })
      },
      handleChangeCheckCode() {
        this.$nextTick(()=>{
          this.form.setFieldsValue({inputCode:''})
        })
        this.currdatetime = new Date().getTime()
        getAction(`/sys/randomImage/${this.currdatetime}`).then(res => {
          if (res.success) {
            this.randCodeImage = res.result
            this.requestCodeSuccess = true
          } else {
            this.$message.error(res.message)
            this.requestCodeSuccess = false
          }
        }).catch(() => {
          this.requestCodeSuccess = false
        })
      },
      cmsFailed(err) {
        this.$notification['error']({
          message: "发送验证码失败",
          description: err,
          duration: 4,
        })
      }
    }
  }
</script>

<style scoped>

</style>